<template>
  <div ref="pieChart05" class="pie-chart-05 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart05 = ref(null);
const echarts = inject("$echarts");

// 参数
const titleName = "设备在线率";
const seriesName = "";
const seriesData = [75];

const option = {
  compCode: "C202310028",
  title: [
    {
      text: titleName,
      x: "center",
      top: "55%",
      textStyle: {
        color: "#FFFFFF",
        fontSize: 14,
        fontWeight: "100",
        fontFamily: "Source Han Sans CN",
      },
    },
    {
      text: `${seriesData[0]}%`,
      x: "center",
      y: "center",
      textStyle: {
        fontSize: "26",
        color: "#FFFFFF",
        fontFamily: "Arial",
        fontWeight: "bold",
      },
    },
  ],
  backgroundColor: "#111",
  polar: {
    radius: ["42%", "52%"],
    center: ["50%", "50%"],
  },
  angleAxis: {
    max: 100,
    show: false,
  },
  radiusAxis: {
    type: "category",
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: seriesName,
      type: "bar",
      //roundCap: true,
      barWidth: 25,
      showBackground: true,
      backgroundStyle: {
        color: "#00227D",
      },
      data: seriesData,
      coordinateSystem: "polar",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: "#4BF3F9",
          },
          {
            offset: 1,
            color: "#4BF3F9",
          },
        ]),
      },
    },
    {
      name: "",
      type: "pie",
      startAngle: 80,
      radius: ["38%"],
      // hoverAnimation: false,
      emphasis: {
        scale: false,
      },
      center: ["50%", "50%"],
      itemStyle: {
        color: "rgba(66, 66, 66, .1)",
        borderWidth: 3,
        borderColor: "#4C6FB7",
      },
      data: [100],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(pieChart05.value);
  chart.setOption(option);
});
</script>
